<template>
  <el-input v-model="value" v-bind="inputProps">
    <template #prepend>
      <el-select v-bind="selectProps" v-model="select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </template>
  </el-input>
</template>
<script lang="ts" setup>
import { computed, PropType, useAttrs } from 'vue'

const props = defineProps({
    modelValue: {
        type: Object as PropType<any>,
        default: () => ({
            value: '',
            select: '1'
        })
    }
})

const emit = defineEmits(['update:modelValue'])

const value = computed({
    get () {
        return props.modelValue.value
    },
    set (val) {
        emit('update:modelValue', { ...props.modelValue, value: val })
    }
})

const select = computed({
    get () {
        return props.modelValue.select
    },
    set (val:string) {
        emit('update:modelValue', { ...props.modelValue, select: val })
    }
})

const attr:any = useAttrs()

const { selectOptions, ...inputProps } = attr

const selectProps = computed(() => {
    return selectOptions!.props ?? {}
})
const options = computed(() => {
    return selectOptions!.options ?? []
})
</script>
<style lang="scss" scoped>
</style>
